<template>
  <div>
    <el-card class="box-card ">
      <div class="content">

        <el-row :gutter="8"
                type="flex"
                align="middle"
                style="margin-bottom:10px;flex-wrap:wrap;align-items: between;">
          <el-col :span="1.5">
            系统模块
          </el-col>
          <el-col :span="40">
            <el-input size="small"
                      v-model="queryParams.title"
                      placeholder="请输入参数名称"></el-input>
          </el-col>
          <el-col :span="1.5">
            操作人员
          </el-col>
          <el-col :span="40">
            <el-input size="small"
                      v-model="queryParams.operName"
                      style="width: 200px"
                      placeholder="请输入用户名称"></el-input>
          </el-col>

          <el-col :span="1.5">
            类型
          </el-col>
          <el-col :span="40">
            <el-select v-model="queryParams.businessType"
                       placeholder="请选择"
                       size="small">

              <el-option v-for="el in typeList"
                         :key="el.dictCode"
                         :label="el.dictLabel"
                         :value="el.dictValue">
              </el-option>

            </el-select>

          </el-col>
          <el-col :span="1.5">
            状态
          </el-col>
          <el-col :span="40">
            <el-select placeholder="请选择"
                       size="small"
                       v-model="queryParams.status">

              <el-option label="成功"
                         :value="0">
              </el-option>
              <el-option label="失败"
                         :value="1">
              </el-option>

            </el-select>

          </el-col>
          <el-col :span="1.5">
            创建时间
          </el-col>
          <el-col :span="30">
            <el-date-picker type="daterange"
                            size="small"
                            style="width:200px"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="1.5">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-search"
                       @click="getData()">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button icon='el-icon-refresh'
                       size="mini"
                       @click="refreshTable()">重置</el-button>
          </el-col>
        </el-row>
        <div class="btnList">
          <el-row :gutter="8"
                  type="flex"
                  align="middle"
                  class="btn_nav">

            <el-col :span="1.5">
              <el-button size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         plain
                         :disabled='checkItem.length==0'
                         @click="delMore">删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         plain
                         @click="clean">清空</el-button>
            </el-col>

            <el-col :span="1.5">
              <el-button size="mini"
                         type="warning"
                         icon="el-icon-download"
                         @click="exportdata"
                         plain>导出</el-button>
            </el-col>

          </el-row>

          <el-row :gutter="8"
                  type="flex"
                  align="middle"
                  class="btn_nav">

            <el-col :span="1.5">
              <el-button size="mini"
                         icon="el-icon-search"
                         circle></el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="refreshTable"
                         size="mini"
                         icon="el-icon-refresh"
                         circle></el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="refreshTable"
                         size="mini"
                         icon="el-icon-menu"
                         circle></el-button>
            </el-col>
          </el-row>
        </div>
        <el-table :data="tableData"
                  v-loading="loading"
                  style="width: 100%"
                  :header-cell-style="{background:'#f8f8f9','text-align':'center'}"
                  @selection-change="handleSelectionChange"
                  :cell-style="{'text-align':'center'}">
          <el-table-column width="80"
                           type="selection">
          </el-table-column>
          <el-table-column prop="operId"
                           width="80"
                           label="日志编号">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
                           prop="title"
                           width="80"
                           label="系统模块">
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
                           prop="businessType"
                           width="80"
                           label="操作类型">
            <template slot-scope="scope">
              <span>{{scope.row.businessType==1?'新增':scope.row.businessType==2?'修改':scope.row.businessType==3?'删除':scope.row.businessType==4?'授权':scope.row.business==5?'导出':scope.row.businessType==6?'导入':scope.row.businessType==7?'强退':scope.row.businessType==8?'生成代码':'清空数据'}}</span>
            </template>

          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
                           prop="requestMethod"
                           width="150"
                           label="请求方式">

          </el-table-column>

          <el-table-column :show-overflow-tooltip="true"
                           prop="operName"
                           width="80"
                           label="操作人员">

          </el-table-column>
          <el-table-column prop="operIp"
                           width="160"
                           label="主机">

          </el-table-column>
          <el-table-column prop="operLocation"
                           width="80"
                           label="操作地点">

          </el-table-column>
          <el-table-column prop="status"
                           width="80"
                           label="操作状态">
            <template slot-scope="scope">
              <span>{{scope.row.status==0?'成功':'失败'}}</span>
            </template>

          </el-table-column>

          <el-table-column prop="operTime"
                           label="操作日期">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="data">

              <el-button v-if="data.row.userId!=1"
                         icon="el-icon-view"
                         type="text"
                         @click="details(data.row)">详细</el-button>
            </template>

          </el-table-column>
        </el-table>
        <div class="page"
             v-show="total!=0">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="queryParams.pageNum"
                         :page-sizes="[3, 5, 9, 10]"
                         :page-size="queryParams.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>

      </div>
    </el-card>
    <div>
      <el-dialog title="操作日志详细"
                 :visible.sync="dialogVisible"
                 width="60%">
        <el-form ref="ruleForm"
                 label-width="80px">
          <div style="display:flex;justify-content:space-between">
            <el-form-item label="操作模块">
              {{detail.title}}/{{detail.businessType==1?'新增':detail.businessType==2?'修改':detail.businessType==3?'删除':detail.businessType==4?'授权':detail.businessType==5?'导出':detail.businessType==6?'导入':detail.businessType==7?'强退':detail.businessType==8?'生成代码':'清空数据'}}
            </el-form-item>
            <el-form-item label="请求地址">
              {{detail.operUrl}}
            </el-form-item>
          </div>
          <div style="display:flex;justify-content:space-between">
            <el-form-item label="登录详细">
              {{detail.operName}}/{{detail.operIp}}/{{detail.operLocation}}
            </el-form-item>
            <el-form-item label="请求方式">
              {{detail.requestMethod}}
            </el-form-item>
          </div>
          <div style="display:flex;justify-content:space-between">
            <el-form-item label="操作方法">
              {{detail.method}}
            </el-form-item>

          </div>
          <div style="display:flex;justify-content:space-between">
            <el-form-item label="请求参数">
              {{detail.operParam}}
            </el-form-item>

          </div>
          <div style="display:flex;justify-content:space-between">
            <el-form-item label="返回参数">
              {{detail.jsonResult}}
            </el-form-item>

          </div>
          <div v-if="detail.errorMsg"
               style="display:flex;justify-content:space-between">
            <el-form-item label="异常信息">
              {{detail.errorMsg}}
            </el-form-item>

          </div>
          <div style="display:flex;justify-content:space-between">
            <el-form-item label="操作状态">
              {{detail.status==0?'正常':'失败'}}
            </el-form-item>
            <el-form-item label="操作时间">
              {{detail.operTime}}
            </el-form-item>
          </div>

        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>

        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 权限
      detail: {},
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        title: null,
        operName: null,
        status: null,
        businessType: null
      },
      tableData: [],
      checkItem: [],
      seltime: [],

      typeList: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      flag: true,
      treeList: []
    }
  },
  mounted() {
    this.getData()
    this.getType()
  },
  methods: {
    async getData() {
      this.loading = true
      let { data } = await this.$axios.get('monitor/operlog/list', { params: this.queryParams })
      this.tableData = data.rows
      this.total = data.total
      this.loading = false
    },
    async getType() {
      let { data } = await this.$axios.get('system/dict/data/type/sys_oper_type', { params: this.queryParams })
      this.typeList = data.data
    },
    delMore() {
      let ids = this.checkItem.map((el) => el.operId)
      this.deleteHandler(ids)
    },
    deleteHandler(id) {
      this.$confirm(`是否确认删除编号为${id.toString()}的数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = await this.$axios.delete(`monitor/operlog/${id.toString()}`)
          console.log(data)
          if (data.data.code != 200) return this.$message.error(data.data.msg)
          this.$message({
            type: 'success',
            message: data.data.msg
          })
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    clean() {
      this.$confirm(`是否确认清空所有操作日志数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let data = await this.$axios.delete(`monitor/operlog/clean`)
          console.log(data)
          if (data.data.code != 200) return this.$message.error(data.data.msg)
          this.$message({
            type: 'success',
            message: data.data.msg
          })
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    details(data) {
      this.dialogVisible = true
      this.detail = data
    },

    // 刷新
    // 刷新
    refreshTable() {
      this.loading = true
      this.getData()
      this.queryParams = { pageNum: 1, pageSize: 5, ipaddr: null, userName: null, status: null }
    },

    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getData()
    },
    handleSelectionChange(val) {
      this.checkItem = val
    },
    async exportdata() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // let data = await this.$axios.get('system/user/export', { params: this.queryParams })
          // console.log(data)
          this.getExport()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async getExport() {
      let { data } = await this.$axios.get('monitor/operlog/export', { params: this.queryParams })

      if (data.code != 200) {
        this.$message.error('失败')
      } else {
        window.location.href = 'https://jumeng.xzjumeng.com/prod-api/common/download?fileName=' + encodeURI(data.msg) + '&delete=' + true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btnList {
  margin-bottom: 8px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>